var grid;
var data = [];
var dataView;
var columns = [ {
	id : "id",
	name : "ID",
	field : "id"
}, {
	id : "firstName",
	name : "First name",
	field : "firstName"
}, {
	id : "lastName",
	name : "Last name",
	field : "lastName"
}, {
	id : "sex",
	name : "Sex",
	field : "sex"
}, {
	id : "street",
	name : "Street",
	field : "street"
}, {
	id : "houseNr",
	name : "House Nr",
	field : "houseNr"
}, {
	id : "city",
	name : "City",
	field : "city"
}, {
	id : "zipCode",
	name : "Zip Code",
	field : "zipCode"
} ];

var options = {
		enableCellNavigation : true,
		forceFitColumns : true,
		enableColumnReorder : false
	};


$(function() {	//called when document ready?
	dataView = new Slick.Data.DataView();
	grid = new Slick.Grid("#myGrid", dataView, columns, options);
	// initialize the model after all the events have been hooked up
	dataView.beginUpdate();
	dataView.setItems(data);
	dataView.endUpdate();
	
	// wire up model events to drive the grid
	dataView.onRowCountChanged.subscribe(function(e, args) {
		grid.updateRowCount();
		grid.render();
	});
	
	dataView.onRowsChanged.subscribe(function(e, args) {
		grid.invalidateRows(args.rows);
		grid.render();
	});
});

function addResult(newData) {	
	dataView.beginUpdate();
	dataView.setItems(newData);
	dataView.endUpdate();
	grid.render();
}

